<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>14_盒子模型-浮动元素对后面兄弟元素影响</title>
        <style>
            #wrapper {
                width: 800px;
                background-color: #666;
                border: 2px solid yellow;
            }

            #wrapper .item {
                float: left;
                width: 300px;
                height: 80px;
                margin: 10px;
                border: 2px dashed red;
            }

            /* 如果父元素的兄弟元素中有文字  那么这些文字不会被浮动的元素覆盖
            而是围绕这浮动元素去展示  这也是最初设计浮动的初衷 */
            #db {
                border: 1px solid black;
                background-color: aqua;
            }


        </style>
    </head>
    <body>
        <div id="wrapper">
            <div class="item">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
            <div class="item">4</div>
        </div>

        <div id="db">
        </div>
    </body>
</html>